<template>
  <div class="mnjy">
    <div class="pub_header">
      <div class="pub_header_back" @click="back">
        <img class="pub_header_back_img" src="images/back.png" alt />
      </div>
      <div class="title">
        <van-dropdown-menu active-color="#fff">
          <van-dropdown-item ref="dropdown" :title="title">
            <van-cell
              v-for="(item,index) in dropdownList"
              :key="index"
              @click="cellClick(item,index)"
            >
              <template slot="title">
                <van-button block :class="{is_choosed:index === currentIndex}">{{ item.act_name }}</van-button>
              </template>
            </van-cell>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <div class="pub_header_share">
        <img class="pub_header_share_img" src="images/share_icon.png" alt />
      </div>
    </div>

    <!-- 一级tab -->
    <van-tabs class="tabs" v-model="activeTest">
      <van-tab :key="index" v-for="(item,index) in testList" :title="item.name"></van-tab>
    </van-tabs>
    <div>{{activeTestContent}}</div>

    <!-- 一级tab -->
    <van-tabs class="tabs" v-model="active">
      <van-tab :key="index" v-for="(item,index) in tabbarList" :title="item.name"></van-tab>
    </van-tabs>
    <!-- 二级tab -->
    <van-tabs class="tabs" v-model="activeB">
      <van-tab :key="index" v-for="(item,index) in tabbarListB" :title="item.name"></van-tab>
    </van-tabs>
    <van-list
      ref="vanList"
      v-model="loading"
      :finished="finished"
      :finished-text="finishedText"
      :immediate-check="false"
      @load="onLoad"
    >
      <template v-for="(item,index) in list">
        <div v-if="type === '1' " :key="index">{{item.act_name}}</div>
        <div v-else-if="type === '2'" :key="index">{{item.act_name}}</div>
        <div v-else-if="type === '3'" :key="index">{{item.act_name}}</div>
        <div v-else-if="type === '4'" :key="index">{{item.act_name}}</div>
        <div v-else-if="type === '5'" :key="index">{{item.act_name}}</div>
        <div v-else-if="type === '6'" :key="index">{{item.act_name}}</div>
      </template>
      <empty v-if="isEmpty" />
    </van-list>
  </div>
</template>
<script>
import {
  F700130,
  F700125,
  F700126,
  F700127,
  F700124,
  F700123,
  F700111,
} from "@/service/api.js";
import RankItem from "@/components/RankItem.vue";

export default {
  name: "JD",
  components: { RankItem },
  data() {
    return {
      activeTestContent: "0",
      activeTest: 0,
      testList: [
        { name: "tab1" },
        { name: "tab2" },
        { name: "tab3" },
        { name: "tab4" },
      ],
      tabbarListB: [],
      type: "",
      isRankAll: true,
      title: "京东生鲜",
      activity_no: "all",
      currentIndex: 0,
      dropdownList: [],
      field_detail: "",
      myRankInfo: {},
      isHasMyRank: false,
      finishedText: "没有更多了",
      isEmpty: false,
      active: 0,
      activeB: 0,
      list: [],
      loading: false,
      finished: false,
      size: 15,
      page: 0,
      tabbarList: [],
      rule_no: "",
      index_no: "",
      field_chn_name: "",
      field_eng_name: "",
      remark: "",
      act_together: "",
      flag: "",
    };
  },
  watch: {
    activeTest: {
      handler: function (cur, old) {
        if (cur === 0) {
          this.item = {
            imgUrl: "http://imgurl1",
            price: 1299,
            name: "kkk",
          };
        } else if (cur === 1) {
          this.imgUrl = "http://imgurl1";
        }
      },
      immediate: false, // 第一次进入页面不执行watch 监听
    },
    active: {
      handler: function (cur, old) {
        this.page = 0;
        this.list = [];
        this.finished = false;
        this.isEmpty = false;
        this.activeB = 0;
        this.type = this.tabbarList[cur].type;
        // 获取二级tab数据
        this.getTabbarListB();
        this.$refs.vanList.check(); // 手动触发上拉加载，获取全量榜单列表数据
      },
      immediate: false, // 第一次进入页面不执行watch 监听
    },
    activeB: {
      handler: function (cur, old) {
        this.page = 0;
        this.list = [];
        this.finished = false;
        this.isEmpty = false;
        this.type = this.tabbarList[cur].type;
        // 获取二级tab数据
        this.getTabbarListB();
        this.$refs.vanList.check(); //获取数据
      },
      immediate: false, // 第一次进入页面不执行watch 监听
    },
  },
  mounted() {
    this.init();

    function sayHi() {
      console.log("a=", a);
      console.log("b=", b);
      var a = "kkk";
      let b = 123;
    }
    sayHi();
  },
  methods: {
    // 下拉菜单点击事件
    async cellClick(item, index) {
      this.page = 0;
      this.title = item.act_name;
      this.flag = item.joinFlag;
      this.$refs.dropdown.toggle();
      this.currentIndex = index;
      if (item.act_name === "炒股榜单") {
        this.isRankAll = true;
        this.isHasMyRank = false;
        this.activity_no = "all";
        this.list = [];
        this.isEmpty = false;
        this.finished = false;
        this.init();
      } else {
        this.isRankAll = false;
        this.isHasMyRank = false;
        this.isEmpty = false;
        this.finished = false;
        this.activity_no = item.activity_no;
        this.flag = item.joinFlag;
        this.list = [];
        this.init();
      }
    },
    back() {
      this.$router.back();
    },
    rankTips() {},
    goCombinationDetail() {},
    onLoad() {
      this.page++;
      this.getJdSxData();
    },
    // 获取京东生鲜数据
    async getJdSxData() {
      this.loading = false;
      switch (this.type) {
        case "1":
          this.list = [
            {
              acc_alias: null,
              account_id: "278370",
              act_name: "精选",
            },
          ];
          break;
        case "2":
          this.list = [
            {
              acc_alias: null,
              account_id: "278370",
              act_name: "海鲜",
            },
          ];
          break;
        case "3":
          this.list = [
            {
              acc_alias: null,
              account_id: "278370",
              act_name: "水果",
            },
          ];
          break;
        case "4":
          this.list = [
            {
              acc_alias: null,
              account_id: "278370",
              act_name: "鸡蛋",
            },
          ];
          break;
        case "5":
          this.list = [
            {
              acc_alias: null,
              account_id: "278370",
              act_name: "牛肉",
            },
          ];
          break;
        case "6":
          this.list = [
            {
              acc_alias: null,
              account_id: "278370",
              act_name: "猪肉",
            },
          ];
          break;
        default:
          break;
      }
    },
    // 初始化页面数据
    init() {
      Promise.all([this.F700125()])
        .then((res) => {})
        .catch((e) => {});
    },

    // 获取一级tab数据
    async F700125() {
      const res = await F700125({
        activity_no: this.activity_no,
        channel_type: "2",
      });
      if (res.data.code === 0) {
        this.tabbarList = [
          {
            name: "精选",
            type: "1",
          },
          {
            name: "海鲜",
            type: "2",
          },
          {
            name: "水果",
            type: "3",
          },
          {
            name: "鸡蛋",
            type: "4",
          },
          {
            name: "牛肉",
            type: "5",
          },
          {
            name: "猪肉",
            type: "6",
          },
        ];
        this.type = this.tabbarList[0].type;
        // 获取二级tab数据
        this.getTabbarListB();
        this.$refs.vanList.check(); // 手动触发上拉加载，获取全量榜单列表数据
      }
    },
    // 获取二级tab 数据
    async getTabbarListB() {
      switch (this.type) {
        case "1":
          this.tabbarListB = [
            {
              name: "精选tab1",
              type: "1",
            },
            {
              name: "精选tab2",
              type: "2",
            },
          ];
          break;
        case "2":
          this.tabbarListB = [
            {
              name: "海鲜tab1",
              type: "1",
            },
            {
              name: "海鲜tab2",
              type: "2",
            },
          ];
          break;
        case "3":
          this.tabbarListB = [
            {
              name: "精选",
              type: "1",
            },
            {
              name: "海鲜",
              type: "2",
            },
          ];
          break;
        case "4":
          this.tabbarListB = [
            {
              name: "精选",
              type: "1",
            },
            {
              name: "海鲜",
              type: "2",
            },
          ];
          break;
        case "5":
          this.tabbarListB = [
            {
              name: "精选",
              type: "1",
            },
            {
              name: "海鲜",
              type: "2",
            },
          ];
          break;
        case "6":
          this.tabbarListB = [
            {
              name: "精选",
              type: "1",
            },
            {
              name: "海鲜",
              type: "2",
            },
          ];
          break;
        default:
          break;
      }
    },
    // 全量榜单列表
    async F700126() {
      const params = {
        page: this.page,
        size: this.size,
        rule_no: this.rule_no,
        index_no: this.index_no,
        act_together: this.act_together,
        channel_type: "2",
      };
      let res = await F700126(params);
      // debugger;
      if (res && res.data.code === 0) {
        this.loading = false;
        let list = res.data.data.data || [];

        // 第一页加载为空数据的时候
        if (this.page === 1 && list.length === 0) {
          this.isEmpty = true;
          this.finished = true;
          this.finishedText = "";
          return false;
        }

        // 加载到最后一页
        if (list.length < this.size) {
          this.list = this.list.concat(list);
          this.finished = true;
          this.finishedText = "没有更多了";
          return false;
        }

        this.list = this.list.concat(list);
        return res;
      }
    },
    // 全量榜单本人信息
    async F700127() {
      const params = {
        rule_no: this.rule_no,
        index_no: this.index_no,
        act_together: this.act_together,
        channel_type: "2",
      };
      let res = await F700127(params);
      if (res.data.code === 0) {
        this.isHasMyRank = true;
        this.myRankInfo = res.data.data;
      } else if (res.data.code === 10003) {
        this.isHasMyRank = false;
      }
    },
    // 单个比赛个人信息
    async F700124() {
      const params = {
        rule_no: this.rule_no,
        index_no: this.index_no,
        activity_no: this.activity_no,
        web_account: this.$store.getters.getUserInfo.web_account,
      };
      let res = await F700124(params);
      if (res.data.code === 0) {
        this.isHasMyRank = true;
        this.myRankInfo = res.data.data;
      } else if (res.data.code === 10003) {
        this.isHasMyRank = false;
      }
      return res;
    },
    // 单个活动榜单列表
    async F700123() {
      let rule_no = this.rule_no;
      let index_no = this.index_no;
      const params = {
        rule_no: this.rule_no,
        index_no: this.index_no,
        activity_no: this.activity_no,
        page: this.page,
        size: this.size,
      };
      let res = await F700123(params);
      if (res && res.data.code === 0) {
        this.loading = false;
        let list = res.data.data.data || [];

        // 第一页加载为空数据的时候
        if (this.page === 1 && list.length === 0) {
          this.isEmpty = true;
          this.finished = true;
          this.finishedText = "";
          return false;
        }

        // 加载到最后一页
        if (list.length < this.size) {
          this.list = this.list.concat(list);
          this.finished = true;
          this.finishedText = "没有更多了";
          return false;
        }

        this.list = this.list.concat(list);
        return res;
      }
    },
    // 获取下拉菜单
    async F700130() {
      let res = await F700130({ channel_type: "2" });
      if (res.data.code === 0) {
        let defu = [{ act_name: "炒股榜单" }];
        this.dropdownList = defu.concat(res.data.data);
        return res;
      }
    },
  },
};
</script>
<style lang="scss">
.mnjy {
  padding-top: 44px;
  background-color: #fff;
  min-height: calc(100vh - 44px);
  &_my {
    padding: 0 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    &_content {
      position: absolute;
      width: 375px;
      height: 81px;
      padding: 15px 15px 0;
      top: 0;
      left: 0;
      .per {
        line-height: 1;
        height: 28px;
        padding-left: 15px;
        display: flex;
        flex-direction: row;
        align-items: center;
        img {
          width: 13px;
          height: 13px;
          right: -16px;
          top: -5px;
        }
      }
    }
    .text1 {
      font-size: 24px;
      font-weight: 600;
      color: #fff;
    }
    .text2 {
      font-size: 12px;
      color: #a9d4fc;
    }
    .text2 {
      font-size: 12px;
      color: #a9d4fc;
    }
    .text3 {
      font-size: 12px;
      color: #fff;
    }
  }
  .pr {
    position: relative;
  }
  // .tabs{

  // }
  .pub_header {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    left: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #3b7be6;
    padding: 0px 15px 0 10px;
    height: 44px;
    color: #fff;
    overflow: hidden;
    .title {
      color: #fff;
      font-size: 18px;
    }
    &_back {
      width: 30px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      &_img {
        width: 16px;
        height: 24px;
      }
    }
    &_btn {
      display: flex;
      flex-direction: row;
      justify-self: center;
      .btn {
        width: 56px;
        height: 28px;
        text-align: center;
        border: 1px solid #fff;
        border-right: none;
        box-sizing: border-box;
        line-height: 28px;
      }
      .btn:nth-of-type(2) {
        border-left: none;
        border-right: 1px solid #fff;
      }
      .btn_active {
        background-color: #fff;
        color: #3b7be6;
      }
    }
    &_share {
      width: 30px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      &_img {
        width: 24px;
        height: 24px;
      }
    }
  }
  .is_choosed {
    color: #3b7be6;
  }
  .van-dropdown-menu__bar {
    background-color: #3b7be6;
  }
  .van-ellipsis {
    color: #fff;
  }
}
</style>
